/*
  学习目标：props接收数据
  本质: props对象, 所有组件标签身上的属性和值, 组成的一个对象
  推荐: 解构props对象
  语法: 
    1. 函数组件, 通过形参接收props
    2. class组件,通过this.props接收props
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Child msg="hello React" count={100}></Child>
        <Hello msg="hello React" count={100}></Hello>
        <Hello msg="hello React" count={100} content="123"></Hello>
      </div>
    );
  }
}

// 1. 定义子组件： 函数式组件 class组件
function Child({ msg, count }) {
  // 👍 props推荐解构
  return (
    <h1>
      Child子组件 - {msg} - {count}
    </h1>
  );
}

class Hello extends Component {
  render() {
    // const { msg, count } = this.props;
    // cp
    const { msg, count } = this.props;
    return (
      <h1>
        我是Hello子组件 - {msg} - {count}
      </h1>
    );
  }
}
